<html>
    <head>
        <title>开启生产环境模式</title>
    </head>
    <body>
        <script>
            // 一、开启生产环境模式
                            /*
                                开发环境下，Vue会提供很多晶澳来帮助你对付常见的错误与陷阱。
                                而在生产模式下，这些警告语句却没有用，反而会增加应用的体积。
                                此外，有一些应该检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。
                            */

                            // 1、 不使用构建工具
                                        /*
                                            如果用Vue完整独立版本，级直接用<script>元素引入 Vue 而不提前进行构建，请记得在生产环境下使用压缩后的版本 (vue.min.js).
                                            两种版本都可以子啊安装指导中找到。
                                        */

                            // 2、使用构建工具
                                        /*
                                            当使用 webpack 或 Browerify 类似的构建工具时，Vue源码会根据 process.env.NODE_ENV 决定是否启用生产环境模式，
                                            默认情况为开发环境模式。在webpack 与 Browerify 中都有方法来覆盖此变量，以启用Vue的生产环境模式，
                                            同时在构建过程中警告语句也会被压缩工具去除。所有这些在 vue-cli 模板中都预先配置好了，但了解一下怎样配置会更好。


                                            ①、webpack 
                                                    在 webpack 4+中，你可以使用mode选项：
                                                    module.exports={
                                                        mode:'production'
                                                    }

                                                但是在 webpack 3 及其更低版本中，你需要使用DefinePlugin ：
                                                    var webpack = require('webpack')

                                                    module.exports={
                                                       // ...
                                                       pulgins:[
                                                            // ...
                                                            new webpack.DefinePlugin({
                                                                'process.env.NODE_ENV':JSON.stringify('production')
                                                            });
                                                       ]
                                                    }

                                            ②、Browerify
                                                   在运行打包命令时将 NODE_ENV 设置为 "production"。这等于告诉 vueify 避免引入热重载和开发相关的代码。
                                                   对打包后的文件进行一次全局的 envify 转换。这使得压缩工具能清除掉 Vue 源码中所有用环境变量条件包裹起来的警告语句。
                                                   
                                                   例如：
                                                        NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

                                                   或者在 Gulp 中使用 envify:
                                                        // 使用 envify 自定义模块指定环境变量
                                                            var envify = require('envify/custom')

                                                            browserify(browserifyOptions)
                                                            .transform(vueify)
                                                            .transform(
                                                                // 必填项，以处理 node_modules 里的文件
                                                                { global: true },
                                                                envify({ NODE_ENV: 'production' })
                                                            )
                                                            .bundle()

                                                    或者配合 Grunt 和 grunt-browserify使用 envify:
                                                         // 使用 envify 自定义模块指定环境变量
                                                            var envify = require('envify/custom')

                                                            browserify: {
                                                                dist: {
                                                                    options: {
                                                                        // 该函数用来调整 grunt-browserify 的默认指令
                                                                        configure: b => b
                                                                        .transform('vueify')
                                                                        .transform(
                                                                            // 必填项，以处理 node_modules 里的文件
                                                                        { global: true },
                                                                        envify({ NODE_ENV: 'production' })
                                                                        )
                                                                        .bundle()
                                                                    }
                                                                }
                                                            }
                                                                                                    
                                        */
        </script>
    </body>
</html>